<template>
  <div class="box_quanquan">
    <header class="header">
      <div class="header-quanquan">圈圈</div>
      <div class="header-icon">
        <img class="header-icon-top" src="../../assets/images/fenxiang_icon.png" alt="">
      </div>
    </header>
    <nav>
      <mt-navbar v-model="selected">
      <mt-tab-item id="1">关注</mt-tab-item>
      <mt-tab-item id="2">推荐</mt-tab-item>
      <mt-tab-item id="3">新鲜</mt-tab-item>
      <mt-tab-item id="4">更多</mt-tab-item>
    </mt-navbar>
      <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        1
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-cell v-for="(n,index) in 4" :key="index" :title="'测试 ' + n" />
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <QuanquanNew></QuanquanNew>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
       <QuanquanNew></QuanquanNew>
      </mt-tab-container-item>
    </mt-tab-container>
    </nav>
  </div>
</template>

<script>
import Vue from 'vue'
import { Navbar, TabItem, TabContainer, TabContainerItem, Cell } from 'mint-ui'
import QuanquanNew from '@/components/quanquannew'
Vue.component(Navbar.name, Navbar)
Vue.component(TabItem.name, TabItem)
Vue.component(TabContainer.name, TabContainer)
Vue.component(TabContainerItem.name, TabContainerItem)
Vue.component(Cell.name, Cell)
export default {
  data () {
    return {
      selected: '1'
    }
  },
  methods: {
    person () {
      this.$router.push({ path: '/quanquan/person' })
    },
    mine () {
      this.$router.push({ path: '/quanquan/mine' })
    }
  },
  components: {
    QuanquanNew
  }
}
</script>

<style lang="scss">
@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
.box_quanquan{
  width: 100%;
  height: 100%;
  .header{
    width: 10rem;
    height:1.4rem;
    .header-quanquan{
      margin-left: 0.52rem;
      float: left;
      width:0.88rem;
      height:1.4rem;
      @include font-dpr(16.5px);
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(26,26,26,1);
      line-height:1.4rem;
    }
    .header-icon{
      margin-right: 0.52rem;
      float: right;
      height: 1.4rem;
      .header-icon-top{
        margin-top: 0.44rem;
      }
    }
  }
.mint-navbar{
      margin: 0 0.52rem;
      height: 0.72rem;
      margin-bottom: 0.9067rem;
      .is-selected{
        border-bottom: none;
        .mint-tab-item-label {
          color: #685DF1;
        }
      }
      .mint-tab-item{
        display: block;
        width:1.76rem;
        height:0.3733rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        opacity:0.5;
        text-align: left;
        .mint-tab-item-label{
          @include font-dpr(15px);
        }
      }
    }
}

</style>
